<template>
	<h4>导航故障</h4>
	<button @click="failureHandle">跳转到其他页面 -> 导航故障</button>
</template>

<script setup>
	import {
		computed,
		watch
	} from 'vue'
	import {
		useRoute,
		useRouter,
		NavigationFailureType,
		isNavigationFailure
	} from 'vue-router'

	const router = useRouter();
	const failureHandle = async () => {
		// const navigationResult = await router.push('/home1');
		// if (navigationResult) {
		// 	// 导航被阻止
		// 	alert("导航被阻止")
		// } else {
		// 	// 导航成功 (包括重新导航的情况)
		// 	alert("导航成功 (包括重新导航的情况)")
		// }

		// 鉴别导航故障
		// router.push('/home1').then(failure => {
		// 	// console.log(failure)
		// 	if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
		// 		// failure.to.path // '/admin'
		// 		// failure.from.path // '/'
		// 		alert('请处理 导航被中止 导致的导航失败')
		// 		console.log(failure.from.path, failure.to.path)
		// 	} else if (isNavigationFailure(failure, NavigationFailureType.redirected)) { // 检查是否是重定向
		// 		// 处理重定向导致的导航失败
		// 		console.log('被重定向到', failure.to.path)
		// 	}
		// })

		// /home 重定向到 /
		// await router.push('/home')
		// console.log(router);
		// if (router.currentRoute.value.redirectedFrom) {
		// 	// redirectedFrom 是解析出的路由地址，就像导航守卫中的 to和 from
		// }

		// 复杂导航流程控制
		try {
			// 第一步导航
			// await router.push('/step1')
			// 第二步导航（依赖第一步完成）
			const result = await router.push('/home1')
			// 导航被重定向 || 导航被中止 检查混淆!!!!××××××
			console.log("NavigationFailureType: ", NavigationFailureType, result.type, isNavigationFailure(result), NavigationFailureType.redirected)
			if (isNavigationFailure(result, NavigationFailureType.duplicated)) {
				console.log('重复导航', result.to.path)
			} else if (isNavigationFailure(result, NavigationFailureType.cancelled)) {
				console.log('导航被取消', result.to.path)
			} else if (isNavigationFailure(result, NavigationFailureType.redirected)) {
				console.log('导航被重定向', result.to.path)
			} else if (isNavigationFailure(result, NavigationFailureType.aborted)) {
				console.log('导航被中止', result.to.path)
			}
			// 第三步导航
			// await router.push('/step3')
		} catch (error) {
			console.log(error)
			if (isNavigationFailure(error)) {
				switch (error.type) {
					case NavigationFailureType.aborted:
						console.warn('导航被守卫中止')
						break
					case NavigationFailureType.cancelled:
						console.warn('导航被新导航取消')
						break
					default:
						console.error('未知导航错误', error)
				}
			} else {
				// 非导航错误
				console.error('发生错误', error)
			}
		}
	}
</script>

<style>
</style>